<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id='app'>
        <h1>秒杀活动表</h1>
       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.goods_name" placeholder="参数名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
            </el-form-item>
               <el-form-item>
            <el-button @click="kanjia()">点击进入砍价活动</el-button>
        </el-form-item>
        </el-form>
     
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="actId" header-align="center" align="center" label="活动编号">
            </el-table-column>

            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
            </el-table-column>
            <el-table-column prop="goodsTitle" header-align="center" align="center" label="商品标题">
            </el-table-column>
            <el-table-column prop="goodsImg" header-align="center" align="center" label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.goodsImg" alt="" width="100px" height="100px" />
                </template>
            </el-table-column>
            <el-table-column prop="goodsDetail" header-align="center" align="center" label="商品详细介绍">
            </el-table-column>
            <el-table-column prop="goodsPrice" header-align="center" align="center" label="原价">
            </el-table-column>
            <el-table-column prop="miaoshaPrice" header-align="center" align="center" label="秒杀价格（元）">
            </el-table-column>
            <el-table-column prop="stockCount" header-align="center" align="center" label="库存（件）">
            </el-table-column>
            <el-table-column prop="startDate" header-align="center" align="center" label="开始时间">
            </el-table-column>
            <el-table-column prop="endDate" header-align="center" align="center" label="结束时间">
            </el-table-column>

            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.actId)"></el-button>
                    <el-button type="text" size="small" @click="deleteHandle(scope.row.actId)"></el-button>
                    <el-button type="text" size="small" @click="information(scope.row.actId)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <el-dialog :title="!dataForm1.actId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
            <el-form :model="dataForm1" ref="dataForm1" @keyup.enter.native="dataFormSubmit()" label-width="80px">
                <el-form-item label="商品id" prop="goodsId">
                    <!-- <el-input v-model="dataForm1.goodsId" placeholder="商品id"> -->
                    <el-select v-model="dataForm1.goodsId" placeholder="请选择">
                        <el-option v-for="item in goodsList" :key="item.goodsId" :label="item.goodsName"
                            :value="item.goodsId">
                        </el-option>
                    </el-select>
                    <!-- </el-input> -->
                </el-form-item>
                <el-form-item label="秒杀价格(元)" prop="miaoshaPrice">
                    <el-input v-model="dataForm1.miaoshaPrice" placeholder="秒杀价格"></el-input>
                </el-form-item>
                <el-form-item label="库存数量（件）" prop="stockCount">
                    <el-input v-model="dataForm1.stockCount" placeholder="库存数量"></el-input>
                </el-form-item>
                <el-form-item label="秒杀开始时间" prop="startDate">
                    <!-- <el-input v-model="dataForm1.startDate" placeholder="秒杀开始时间"> </el-input> -->
                    <div class="block">
                        <!-- <span class="demonstration">默认</span> -->
                        <el-date-picker v-model="dataForm1.startDate" type="datetime" placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="秒杀结束时间" prop="endDate">
                    <!-- <el-input v-model="dataForm1.endDate" placeholder="秒杀结束时间"></el-input> -->
                    <div class="block">
                        <!-- <span class="demonstration">默认</span> -->
                        <el-date-picker v-model="dataForm1.endDate" type="datetime" placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="addAct()">确定</el-button>
            </span>
        </el-dialog>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    goodsList: [],
                    baseurl: "http://localhost:88/api",
                    dataForm: {
                        goods_name: ''
                    },
                    dataList: [],
                    pageIndex: 1,
                    pageSize: 10,
                    totalPage: 0,
                    dataListLoading: false,
                    dataListSelections: [],
                    addOrUpdateVisible: false,
                    visible: false,
                    dataForm1: {
                        actId: 0,
                        goodsId: '',
                        miaoshaPrice: '',
                        stockCount: '',
                        startDate: '',
                        endDate: '',
                        // goodsName: '',
                        // goodsTitle: '',
                        // goodsImg: '',
                        // goodsDetail: '',
                        // goodsPrice: '',
                        // goodsStock: ''

                    },

                }
            },
            //方法集合
            methods: {
                kanjia(){

                    location="./kanjia.html"
                },
                //详情
                information(actId) {
                    localStorage.setItem("actId",actId);
                    location = "./miaosha.html"

                },
                addAct() {
                    axios.post(`${this.baseurl}/user/activity/save`, this.dataForm1)
                        .then(({ data }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.visible = false
                                        this.$emit('refreshDataList')
                                    }
                                })
                                this.visible = false;
                            } else {
                                this.$message.error(data.msg)
                            }
                        })

                },
                getGoodList() {
                    axios.post(`${this.baseurl}/user/goods/goodsList`)
                        .then(({ data }) => {
                            if (data && data.code === 0) {
                                console.log(data);
                                this.goodsList = data.goods
                            }
                        })
                },
                //添加要秒杀的商品
                addOrUpdateHandle() {
                    this.visible = true;
                },
                getDataList() {
                    this.dataListLoading = true
                    axios({
                        url: `${this.baseurl}/user/activity/voList`,
                        method: 'get',
                        params: ({
                            'goods_name': this.dataForm.goods_name
                        })
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            console.log(data);
                            this.dataList = data.data

                        } else {
                            this.dataList = []
                            this.totalPage = 0
                        }
                        this.dataListLoading = false
                    })
                },
                // 每页数
                sizeChangeHandle(val) {
                    this.pageSize = val
                    this.pageIndex = 1
                    this.getDataList()
                },
                // 当前页
                currentChangeHandle(val) {
                    this.pageIndex = val
                    this.getDataList()
                },
                // 多选
                selectionChangeHandle(val) {
                    this.dataListSelections = val
                },

            },
            created() {
                this.getDataList();
                this.getGoodList();

            },
        })
    </script>

</body>

</html>